/*
Theme Name: 5styles
Theme URI: http://marslau.com/
Description: WordPress theme <a href="http://marslau.com/archives/454.html" title="WordPress����5styles">5styles</a> Designed by <a href="http://marslau.com/" title="MarsLau's blog">MarsLau</a> 
Version: 1.0
Author: Mars Lau
Author URI: http://marslau.com/
Tags:green,black,fixed width,styles,two columns,right sidebar,left sidebar,widgets,valid XHTML,valid CSS
*/

body{ margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #555555; background:#545454; }
h1, h2, h3 {margin-top: 0px;}
h1 {font-size: 2.4em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
p, ol, ul {margin:0 0 10px 0; line-height:20px;}
img { border: none;}
a{ color:#00A0DA; text-decoration:none;line-height:22px;}
a:hover{ color:#0077AA;}
.center{ text-align:center;}
.clear{ clear:both; font-size:0px; height:0px;} 
.comment img{
	max-width: 520px; width:expression(this.width > 520 ? "520px" : this.width)
}

pre,blockquote {
	background:#F4F5F7;
	border:1px dashed #CCC;
	padding:8px 12px 8px 36px;
	margin:5px 0;
	
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Exp lorer 5.5+ */
}

/*---top---*/
#header{ margin:0; padding:0; height:69px; background:url(images/header-bg.gif) repeat-x;  text-decoration:none;}
#header-left{ float:left; margin:0px; padding:0px;}
	#header h1{ float:left; margin:0; padding:21px 0 20px 20px; font-size:24px;}
	#header h1 a{ color:#72d4ff; text-decoration:none;}
	.description{ float:left; margin:33px 0 0 10px; padding:0px; color:#e0e0e0;}
#header-right{ float:right; margin:0px; padding:0;}
	.layout{ margin:0px 10px 0 auto; padding:2px 0 0 54px; width:80px; height:19px; background: url(images/style.gif) no-repeat 0px 0px;  }

	.layout img { margin:0; padding:0 0px 0 0 }
	
#menu{ float:right; margin: 12px 0 0 0; padding:0px ;}
	#menu li{ margin:0 5px; padding:0; display:inline; line-height:24px;height:24px;}
	#menu li a{ color:#d8d8d8; text-decoration:none;}
	#menu li.current_page_item a, #header li a:hover{ color:#f2f2f2; text-decoration:none; background: url(images/menu-li.gif) no-repeat bottom center;padding:0px 0 4px 0;}

/*---content---*/
	.navigation-top{ margin:2px 0 0 0; line-height:30px; background:url(images/line.gif) bottom repeat-x; }
	.navigation-top span{ margin: 0 0 0 15px; padding:0 0 0 20px; background: url(images/nav-top-icon.gif) left 0px no-repeat;}
	.post{ margin:5px 20px 15px 20px; padding:0 0px 0 0;}
	.post .post-title{ margin:20px 0 0px 0; padding: 2px 0; border-bottom:1px dotted  #c1c1c1; font-size:1.6em; line-height:36px; }
	.post .post-title a:hover{ background: url(images/icons.gif) right -291px no-repeat; padding:0 43px 0 0px;}
	.post .entry img{max-width:600px;}
	.postmetadata-top{ margin:0; padding:0; line-height:22px;font-size:11px; }
	.post-comments{ float:right; background: url(images/icons.gif) -7px -194px no-repeat; padding:0 0 0 13px; margin: 0 0 0 0px;}
	.post-date{  background: url(images/icons.gif) -7px -222px no-repeat; padding:0 0 0 13px; }
	.post-views{ margin:0 0 0 10px;  background: url(images/icons.gif) -7px -246px no-repeat; padding:0 0 0 13px;}
	.postmetadata{margin:0px; padding:0 0 4px 0; line-height:24px;  background: url(images/line-deep.gif) left bottom repeat-x; }
	.postmetadata a{ color:#6CADC4;}
	.post-cat{ margin:0 10px 0 0; background: url(images/icons.gif) -7px -152px no-repeat; padding:0 0 0 13px;}
	.post-author{ margin:0 10px 0 0; background: url(images/icons.gif) -7px -269px no-repeat; padding:0 0 0 13px;}
	.post-tag{ margin:0 10px 0 0; background: url(images/icons.gif) -7px -125px no-repeat; padding:0 0 0 13px;}
	.entry{ margin: 8px 0; padding:0px; line-height:22px;}
	
	.navigation{ margin:5px 15px 5px 15px; height:22px; }
	.previous{ float:left; background: url(images/alignleft.gif) left 5px no-repeat; padding:0 0 0 15px; line-height:22px; }
	.next{ float:right; background: url(images/alignright.gif) right 5px no-repeat; padding:0 15px 0 0; line-height:22px;}
	.related{ margin:20px 15px 10px 15px; padding:0px;}
	.related h4{ margin:10px 0 5px 0; padding:0px; font-weight:bold; font-size:14px; color:#2cacda; }
	.related ul{ margin:0px; padding:0px;}
	.related ul li{ padding:0 0 0 0px; margin:0 0 0 0px; list-style-type:none; line-height:22px; color:#2cacda;}
	.related ul li a{ padding:0 0 0 15px; background: url(images/list.gif) no-repeat -7px -7px; color:#787878; }
	.related ul li a:hover{ background: url(images/list-hover.gif) no-repeat -7px -7px; color:#85bf73; }
	.cat-icon{ float:left; width:200px; height:20px; }

/*---comments---*/	
#comments-wrap{ margin:20px 15px; padding:0px;}
	#comments-wrap h2{  margin:0px 10px 0 0; padding:0px; font-size:14px; color:#2cacda; display:inline; height:30px;}
	.goto-comment{ padding:0 15px 0 8px; border-left:1px solid #898989; line-height:22px; background: url(images/icons.gif) 52px -174px no-repeat; }
	.goto-comment a{color:#787878;}
	.goto-comment a:hover{color:#85bf73;}
	#comments-wrap ul{ margin:10px 0 20px 0;; padding:0; }
	#comments-wrap ul li{ margin: 5px 0 0px 0; padding:0; border:1px solid #ADD8E6; background: url(images/comments-bg.gif) repeat; list-style:none;}
	#comments-wrap ul li:hover{ background: url(images/comments-bg-hover.gif) repeat; }
	.commentleft{ float:left; margin:0 8px 8px 8px; }
	.commentcount{ font-weight:bold; font-size:11px; color:#2cacda; text-align:center; line-height:22px;}
	.commentright { margin:0 10px 0 55px; }
	.commentright .header{ margin:0; padding:0; line-height:22px; border-bottom:1px dashed #dbdbdb;}
	.commentright .waiting{ margin:5px 0; background:#FFCCCC; border:1px solid #FF3366;}
	.commentright .commenttext{ margin:10px 5px 10px 5px; padding:0px; line-height:22px;}
	#comments-wrap ol{ margin:10px 0; padding:0; }
	#comments-wrap ol li{ padding:0 0 0 0px; margin:0 0 0 0px; list-style-type:none; line-height:22px; color:#2cacda;}
	#comments-wrap ol li a{margin: 5px 0 0px 0; padding:0 0 0 15px; background: url(images/list.gif) no-repeat -7px -5px; color:#787878;}
	#comments-wrap ol li a:hover{ background: url(images/list-hover.gif) no-repeat -7px -5px; color:#85bf73; }
	#conmmentform{ padding:10px 20px; border:1px solid #e4e4e3; background: url(images/commentform-bg.gif) left bottom no-repeat #fdfdfc; }
	.conmmentform-title{ margin:10px 0 0 0; padding:0px; line-height:22px;}
	#conmmentforminfo{ float:left; margin:0px 15px 0 0; width:160px; display:inline;}
	#conmmentforminfo input{padding:2px 2px ; color:#787878; font-size:12px; background: url(images/commentinput-bg.gif) top left no-repeat; border:1px solid #c4c4c4; width:150px;}
	#conmmentforminfo input:hover{border:1px solid #00A4EE;}
	#conmmentformtext{ margin:0 0 0 175px ; padding:0; }
	#conmmentformtext textarea{ margin:0px; padding:2px 2px ;width:96%; background: url(images/commentinput-bg.gif) top left no-repeat; border:1px solid #c4c4c4; color:#787878; font-size:12px;}
	#conmmentformtext textarea:hover{border:1px solid #00A4EE;}
	.comment-button{ margin:5px 0; background:url(images/comment-button.gif) no-repeat; width:80px; height:20px; border:0px; cursor:pointer; }

	#commentsnavi a,#commentsnavi span{display:block;padding:4px;margin:1px;float:left;border:1px solid #cccccc;text-decoration:none;line-height:1}
	#commentsnavi{clear:both;height:20px;margin:10px 0}
/*---sidebar---*/	
	#rss a{ margin:0px 0px  ; padding:0; display:block; background: url(images/rss.gif) no-repeat 0 0; height:20px; cursor:pointer;}
	#rss a:hover{ margin:0; padding:0;  background: url(images/rss.gif) no-repeat 0 -20px; height:20px;}
	#searchform { margin:10px 0 0 0; padding: 0; }
	#searchform #as_q { margin: 0; padding:1px 0 0 2px; width:175px; background: #ffffff; border: 1px solid #cbd8e5; line-height: 16px;}
	#sidebar #searchform{ text-align: left;}
	#searchsubmit { margin: 0; padding: 0px; width: 54px; height: 18px; background: url(images/search-button.gif); border:none; cursor:pointer;}
	#sidebar ul { margin:0; padding:0; list-style:none;}
	#sidebar ul li{ margin:10px 0 0 0; padding:5px 5px 5px 5px ; background:url(images/line.gif) repeat-x top; }
	#sidebar ul li h2{ margin:0px; padding:0; color:#898989; line-height:28px; }
	#sidebar ul li ul{ margin:0px; padding:0;}
	#sidebar ul li ul a{ color:#898989; text-decoration:none;}
	#sidebar ul li ul a:hover{color:#85bf73;}
	#sidebar ul li ul li{ margin:0px 0; padding:0 0 0 0px; line-height:22px; background: none; }
	#sidebar ul li ul li a{padding:0 0 0 15px; color:#00A0DA; text-decoration:none; background:url(images/list.gif) no-repeat -7px -5px;}
	#sidebar ul li ul li a:hover{ color:#85bf73; background:url(images/list-hover.gif) no-repeat -7px -5px;}
	#sidebar .side-cat li{ float:left; width:50%;}
	
/*---footer---*/
#footer{ clear:both; margin: 0; padding:0; background:url(images/foot-bg.gif) repeat-x; height:70px; }
	#footer-wp{ float:left; margin: 0; padding:0; background:url(images/foot-wp.gif) no-repeat 0 0; height:70px; width:73px; }
	#footer-link{ float:left; margin:20px 0 0 20px; color:#d8d8d8; display:inline;}
	#footer-link p{ margin:0px; padding:0px; line-height:18px;}
	#footer-link a{ color:#CCCCCC; font-family: Arial, Helvetica, sans-serif;}
	#footer-link a:hover{ color:#FFFF99;}
	#to-top{ margin:10px 30px 0 0 ; float:right;width:31px; height:52px; background:url(images/top.gif) left 0 no-repeat; }
	#footer-right a{width:31px; height:52px; }
	#footer-right a:hover{ background:url(images/top.gif) right 0 no-repeat !important;}
